<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
     <meta name='viewport' content='width=device-width, initial-scale=1.0'>
     <title>点击弹出索引</title>
     <link rel='stylesheet' href='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/default.min.css'>
     <script src='//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
</head>
<body>
    <button value="按钮1">按钮1</button>
    <button value="按钮2">按钮2</button>
    <button value="按钮3">按钮3</button>
    <button value="按钮4">按钮4</button>
    <button value="按钮5">按钮5</button>
     <pre>
        <code style='max-height: 400px;'>
            // 
            let buttons = document.querySelectorAll('button')
            // 错误 -- i是全局变量 循环之后i是5
            // for(var i = 0 ; i < buttons.length ;i++) {
            //     buttons[i].addEventListener('click',() => {
            //         console.log('点击',buttons[i].value);
            //     })
            // }
            
            // 正确 局部变量 每个i都有对应的作用域
            // for(let i = 0 ; i < buttons.length ;i++) {
            //     buttons[i].addEventListener('click',() => {
            //         console.log('点击',buttons[i].value);
            //     })
            // }
    
            // 使用自执行函数 利用函数变量的作用域进行存储每个全局变量a
            for(var i = 0 ; i < buttons.length ;i++) {
                ~function(i){
                    buttons[i].addEventListener('click',() => {
                    console.log('点击',buttons[i].value);
                })
                }(i)
            }        
        </code>
     </pre>
     <script> hljs.highlightAll(); </script>
     <script>
        // 
        let buttons = document.querySelectorAll('button')
        // 错误 -- i是全局变量 循环之后i是5
        // for(var i = 0 ; i < buttons.length ;i++) {
        //     buttons[i].addEventListener('click',() => {
        //         console.log('点击',buttons[i].value);
        //     })
        // }
        
        // 正确 局部变量 每个i都有对应的作用域
        // for(let i = 0 ; i < buttons.length ;i++) {
        //     buttons[i].addEventListener('click',() => {
        //         console.log('点击',buttons[i].value);
        //     })
        // }

        // 使用自执行函数 利用函数变量的作用域进行存储每个全局变量a
        for(var i = 0 ; i < buttons.length ;i++) {
            ~function(i){
                buttons[i].addEventListener('click',() => {
                console.log('点击',buttons[i].value);
            })
            }(i)
        }
     </script>
</body>
</html>